<template>
  <div class="breadcrumb">
    <el-button
      class="back"
      @click="$router.back(-1)"
      size="mini"
      type="danger"
      v-text="$t('main.return')"
      plain
    ></el-button>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item, index) in matchedArr" :key="index">
        <router-link v-if="item.url" :to="item.url">{{
          $t(item.title)
        }}</router-link>
        <a v-else>
          {{ $t(item.title) }}
        </a></el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
  computed: {
    matchedArr() {
      let temp = [],
        temps = [];
      // , index, self
      this.$route.matched.filter((item) => {
        if (item.meta) {
          const meta = item.meta;
          temp.push(meta);
        }
      });
      temp.filter((item) => {
        if (!temps.includes(item)) {
          temps.push(item);
        }
      });
      return temps;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  .back {
    margin-right: 10px;
  }
  span {
    font-size: 18px;
  }
}
</style>
